<template>
	<div class="w100  bgfff bra8 pad10 mt10">
		<div class="displayFlex mb20">
			<div style="color: #888;" class="mr20">开始时间</div>
			<div class="date-item displayFlex">
				<el-date-picker v-model="params.startTime" type="date" placeholder="开始时间" size="mini"
					format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 130px;" @change="getDefInspectStdBook">
				</el-date-picker>
				<!-- <i class="el-icon-caret-bottom" style="margin-bottom: 6px;"></i> -->
			</div>
			<div>
				<img src="@/assets/sIcon109.png" style="width: 20px;height: 8px;margin: 0 15px;" />
			</div>
			<div class="date-item displayFlex">
				<el-date-picker v-model="params.endTime" type="date" placeholder="结束时间" size="mini" format="yyyy-MM-dd"
					value-format="yyyy-MM-dd" style="width: 130px;" @change="getDefInspectStdBook">
				</el-date-picker>
				<!-- <i class="el-icon-caret-bottom" style="margin-bottom: 6px;"></i> -->
			</div>
		</div>

		<div>
			<div v-for="(item,index) in dataList1">
				<div class="displayFlex">
					<div style="width: 8px;height: 8px;border-radius: 50%;border: 1px solid#D2D2D2;" class="mr10"></div>
					<span style="color: #8A8A8A;font-size: 12px;" class="mr5 ml5">{{item.actualExecuteTime}}</span>
					<span style="color: #333;font-size: 16px">巡检单{{item.inspectReceiptNo}}</span>
				</div>

				<div style="display: flex;justify-content: space-between;margin-left: 3px;">
					<div style="border-left: 1px solid#E7E7E7;line-height: 50px;color: #333;flex:2;height: 264px;overflow-y: auto;"
						class="text-left">
						<div class="pl20">巡检要素</div>
						<div class="pl20" v-for="(item2,index2) in item.termList" :key="index2"
							:style="{'background':index2%2==0?'#F9F9F9':'#fff'}">
							{{item2.termName}}
						</div>
					</div>

					<div style="border-left: 1px solid#E7E7E7;line-height: 50px;color: #333;flex:1;height: 264px;overflow-y: auto;"
						class="text-left">
						<div class="pl20">巡检结果</div>
						<div class="pl20" v-for="(item2,index2) in item.termList" :key="index2"
							:style="{'background':index2%2==0?'#F9F9F9':'#fff'}">
							{{item2.result}}
						</div>
					</div>

					<div style="border-left: 1px solid#E7E7E7;line-height: 50px;color: #333;flex:2;height: 264px;overflow-y: auto;"
						class="text-left">
						<div class="pl20">问题说明</div>
						<div class="pl20">
							{{item.problemContent}}
						</div>
					</div>

					<div style="border-left: 1px solid#E7E7E7;line-height: 50px;color: #333;flex:1;height: 264px;overflow-y: auto;"
						class="text-left">
						<div class="pl20">处理结果</div>
						<div class="pl20">
							{{item.solvedResult}}
						</div>
					</div>
					<div style="border-left: 1px solid#E7E7E7;line-height: 50px;color: #333;flex:1;height: 264px;overflow-y: auto;"
						class="text-left">
						<div class="pl20">问题工单</div>
						<div class="pl20">
							{{item.problemOrderReceiptNo}}
						</div>
					</div>

					<div style="border-left: 1px solid#E7E7E7;line-height: 50px;color: #333;flex:2;height: 264px;overflow-y: auto;"
						class="text-left">
						<div class="pl20">现场照片</div>
						<div class="pl20" v-if="item.imgSrcList && item.imgSrcList.length > 0" style="display: flex;">
							<el-image :src="item.imgSrcList[0]" style="width:98px;height:55px"
								:preview-src-list="item.imgSrcList" />
							<div style="line-height: 20px;margin-left: 10px;">
								<div class="mb5">{{item.imgSrcList.length}}张</div>
								<div class="displayFlex">
									<img src="@/assets/sIcon135.png" style="width: 12px;height: 12px;" />
									<span style="color: #888888;" class="ml5">查看大图</span>
								</div>
							</div>
						</div>
						<div v-else class="pl20 textCenter" style="color: #888;">暂无图片</div>
					</div>

					<div style="border-left: 1px solid#E7E7E7;line-height: 50px;color: #333;flex:1;height: 264px;overflow-y: auto;"
						class="text-left">
						<div class="pl20">备注</div>
						<div class="pl20">

						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import moment from 'moment'
	let that
	let IMGURL =
		'https://www.weifeibangbang.com/wfbb-webupload/service/sys/file/upload/view?appKey=5da5441f62e48aedc7a3853ffc75c2db&prodID=gf'
	export default {
		props: ['defenceId'],
		data() {
			return {
				params: {
					defenceId: '',
					startTime: moment().subtract(1, 'months').format('YYYY-MM-DD'),
					endTime: moment().format('YYYY-MM-DD')
				},
				dataList1: []
			}
		},
		mounted: function() {
			that = this
			that.params.defenceId = that.defenceId
			that.getDefInspectStdBook()
		},

		methods: {
			getDefInspectStdBook() {
				that.ajax({
					url: '/gasOutlet/defDet/getDefInspectStdBook',
					data: JSON.stringify(that.params),
					contentType: 'application/json',
					success: function(result) {
						result.data.forEach(function(obj) {
							for (var i in obj.imgSrcList) {
								obj.imgSrcList[i] = IMGURL + '&fileID=' + obj
									.imgSrcList[i]
							}
						})
						console.log(result.data)
						that.dataList1 = result.data
					},
				}, "加载中...")
			},
		}
	}
</script>

<style scoped>

</style>